<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Lightning Timer</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }
    
    body {
      height: 100vh;
      width: 100vw;
      display: flex;
      justify-content: center;
      align-items: center;
      font-family: 'Arial', sans-serif;
      font-weight: bold;
      color: white;
      background-color: black;
      overflow: hidden;
      transition: background-color 0.5s ease;
    }
    
    body.warning {
      background-color: #FFB6C1;
      color: black;
    }
    
    body.deadline {
      background-color: red;
      color: white;
    }
    
    .timer-container {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
    
    #countdown {
      font-size: 20vmin;
      cursor: pointer;
      margin-bottom: 10px;
    }
    
    .control-buttons {
      display: none;
      gap: 10px;
      margin-top: 20px;
    }
    
    #config-icon {
      position: absolute;
      top: 20px;
      right: 20px;
      width: 24px;
      height: 24px;
      cursor: pointer;
      opacity: 0.5;
      transition: opacity 0.3s ease;
    }
    
    #config-icon:hover {
      opacity: 1;
    }
    
    #config-modal {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background-color: #333;
      padding: 2rem;
      border-radius: 10px;
      z-index: 100;
      box-shadow: 0 0 20px rgba(0, 0, 0, 0.5);
      color: white;
      text-align: left;
    }
    
    .modal-backdrop {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background-color: rgba(0, 0, 0, 0.7);
      z-index: 99;
    }
    
    .form-group {
      margin-bottom: 1.5rem;
    }
    
    label {
      display: block;
      margin-bottom: 0.5rem;
      font-size: 1rem;
      font-weight: normal;
    }
    
    input[type="number"] {
      width: 100%;
      padding: 0.5rem;
      font-size: 1rem;
      border: none;
      border-radius: 5px;
    }
    
    button {
      background-color: #4CAF50;
      color: white;
      border: none;
      padding: 0.75rem 1.5rem;
      font-size: 1rem;
      border-radius: 5px;
      cursor: pointer;
      transition: background-color 0.3s;
    }
    
    button:hover {
      background-color: #45a049;
    }
    
    .buttons {
      display: flex;
      justify-content: space-between;
    }
    
    #cancel-btn {
      background-color: #666;
    }
    
    #cancel-btn:hover {
      background-color: #555;
    }
    
    #resume-btn {
      background-color: #4A90E2;
    }
    
    #resume-btn:hover {
      background-color: #3A80D2;
    }
    
    #reset-btn {
      background-color: #E74C3C;
    }
    
    #reset-btn:hover {
      background-color: #C0392B;
    }
  </style>
</head>
<body>
  <div class="timer-container">
    <div id="countdown">Start</div>
    <div class="control-buttons">
      <button id="resume-btn">Resume</button>
      <button id="reset-btn">Reset</button>
    </div>
  </div>
  
  <svg id="config-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
    <circle cx="12" cy="12" r="3"></circle>
    <path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 0 1 0 2.83 2 2 0 0 1-2.83 0l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-2 2 2 2 0 0 1-2-2v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 0 1-2.83 0 2 2 0 0 1 0-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1-2-2 2 2 0 0 1 2-2h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 0 1 0-2.83 2 2 0 0 1 2.83 0l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 2-2 2 2 0 0 1 2 2v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 0 1 2.83 0 2 2 0 0 1 0 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 2 2 2 2 0 0 1-2 2h-.09a1.65 1.65 0 0 0-1.51 1z"></path>
  </svg>
  
  <div class="modal-backdrop"></div>
  
  <div id="config-modal">
    <h2 style="margin-bottom: 1.5rem; text-align: center;">Configure Timer</h2>
    
    <div class="form-group">
      <label for="time-input">Timer Duration (seconds)</label>
      <input type="number" id="time-input" min="1" value="300">
    </div>
    
    <div class="form-group">
      <label for="warning-input">Warning Time (seconds)</label>
      <input type="number" id="warning-input" min="1" value="60">
      <small style="display: block; margin-top: 0.5rem; opacity: 0.7;">Set to 0 to disable warning</small>
    </div>
    
    <div class="buttons">
      <button id="cancel-btn">Cancel</button>
      <button id="save-btn">Save</button>
    </div>
  </div>

  <script>
    // Default settings: 5 minutes, warning at 1 minute
    let count = 5 * 60;
    let warning = 60;
    let countdownInterval = null;
    let isRunning = false;
    let isPaused = false;
    let initialCount = 5 * 60;
    
    const countdownEl = document.getElementById('countdown');
    const configIcon = document.getElementById('config-icon');
    const configModal = document.getElementById('config-modal');
    const modalBackdrop = document.querySelector('.modal-backdrop');
    const timeInput = document.getElementById('time-input');
    const warningInput = document.getElementById('warning-input');
    const saveBtn = document.getElementById('save-btn');
    const cancelBtn = document.getElementById('cancel-btn');
    const controlButtons = document.querySelector('.control-buttons');
    const resumeBtn = document.getElementById('resume-btn');
    const resetBtn = document.getElementById('reset-btn');
    
    window.onload = function() {
      // Can optionally set count and warning in the url
      // e.g. /index.html#30,15 = 30 seconds, warning at 15
      //      /index.html#300 = 5 minutes, no warning
      const match = /(\d+),?(\d+)?/.exec(location.hash);
      if (match && match[1]) {
        count = parseInt(match[1], 10);
        initialCount = count;
        timeInput.value = count;
      }
      if (match && match[2]) {
        warning = parseInt(match[2], 10);
        warningInput.value = warning;
      }
      if (match && !match[2]) {
        warning = 0; // Disable warning
        warningInput.value = 0;
      }
      
      countdownEl.textContent = "Start";
      countdownEl.style.cursor = 'pointer';
    }

    // Format seconds to MM:SS
    function toMinutesAndSeconds(seconds) {
      const minutes = Math.floor(seconds / 60);
      const remainingSeconds = seconds % 60;
      return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`;
    }
    
    function countdown() {
      countdownEl.textContent = toMinutesAndSeconds(count);
      document.title = toMinutesAndSeconds(count);
      
      if (warning > 0 && count <= warning) {
        document.body.className = 'warning';
      }
      
      if (count > 0) {
        count--;
      } else {
        clearInterval(countdownInterval);
        isRunning = false;
        isPaused = false;
        document.body.className = 'deadline';
        countdownEl.textContent = toMinutesAndSeconds(count);
        document.title = toMinutesAndSeconds(count);
        countdownEl.style.cursor = 'pointer';
        controlButtons.style.display = 'none';
        configIcon.style.display = 'block';
      }
    }
    
    function startTimer() {
      if (!isRunning && !isPaused) {
        isRunning = true;
        isPaused = false;
        document.body.className = '';
        configIcon.style.display = 'none';
        controlButtons.style.display = 'none';
        
        // Start the interval and immediately call countdown once
        countdown();
        countdownInterval = setInterval(countdown, 1000);
      }
    }
    
    function pauseTimer() {
      if (isRunning) {
        clearInterval(countdownInterval);
        isRunning = false;
        isPaused = true;
        controlButtons.style.display = 'flex';
      }
    }
    
    function resumeTimer() {
      if (!isRunning && isPaused) {
        isRunning = true;
        isPaused = false;
        controlButtons.style.display = 'none';
        countdownInterval = setInterval(countdown, 1000);
      }
    }
    
    function resetTimer() {
      clearInterval(countdownInterval);
      isRunning = false;
      isPaused = false;
      count = initialCount;
      document.body.className = '';
      countdownEl.textContent = "Start";
      document.title = "Lightning Timer";
      configIcon.style.display = 'block';
      controlButtons.style.display = 'none';
    }
    
    function openModal() {
      configModal.style.display = 'block';
      modalBackdrop.style.display = 'block';
    }
    
    function closeModal() {
      configModal.style.display = 'none';
      modalBackdrop.style.display = 'none';
    }
    
    function saveSettings() {
      count = parseInt(timeInput.value) || 300;
      initialCount = count;
      warning = parseInt(warningInput.value) || 0;
      
      // Update URL hash
      location.hash = warning > 0 ? `${count},${warning}` : `${count}`;
      
      closeModal();
    }
    
    // Event listeners
    countdownEl.addEventListener('click', function() {
      if (!isRunning && !isPaused && count === initialCount) {
        // Start the timer if it's not running and not paused
        startTimer();
      } else if (isRunning) {
        // Pause the timer if it's running
        pauseTimer();
      } else if (count <= 0) {
        // Reset if timer has ended
        resetTimer();
      }
    });
    
    resumeBtn.addEventListener('click', resumeTimer);
    resetBtn.addEventListener('click', resetTimer);
    
    configIcon.addEventListener('click', openModal);
    saveBtn.addEventListener('click', saveSettings);
    cancelBtn.addEventListener('click', closeModal);
    modalBackdrop.addEventListener('click', closeModal);
  </script>
</body>
</html>
